<template>
  <a-row :gutter="7">
    <a-col :md="7" :sm="24">
      <a-card :bordered="false">
        <div style="background: #fff;padding-left:2px;height: 100%; margin-top: 0px">
          <a-row style="margin-top: 10px">
            <a-col :span="24">
              <a-input-search @search="onSearch" style="width:100%" placeholder="请输入组织名称"/>
            </a-col>
          </a-row>
          <a-spin :spinning="factoryTreeLoading">
            <template v-if="factoryTreeData.length>0">
              <a-tree
                class="mdm-companydept-tree"
                show-icon
                showLine
                :selectedKeys="selectedKeys"
                @select="handleTreeSelect"
                :dropdownStyle="{maxHeight:'200px',overflow:'auto'}"
                :treeData="factoryTreeData"
                :autoExpandParent="autoExpandParent"
                :expandedKeys="treeExpandedKeys"
                :replaceFields="treeReplaceFields"
                @expand="handleTreeExpand"
                style="margin-top: 5px">
                <!-- 自定义子节点图标 -->
                <a-icon slot="myIcon" type="unordered-list" style="color:#0c8fcf;"/>
              </a-tree>
            </template>
            <template v-else>
              <a-empty style="margin-top: 20px"/>
            </template>
          </a-spin>
        </div>
      </a-card>
    </a-col>
    <a-col :md="17" :sm="24">
      <a-card :bordered="false">
        <a-tabs defaultActiveKey="2">
          <a-tab-pane key="1" tab="基本信息">
            <mdm-factory-base-info ref="mdmFactoryBaseInfo"></mdm-factory-base-info>
          </a-tab-pane>
          <a-tab-pane key="2" tab="工作中心">
            <mdm-work-center-list-tab></mdm-work-center-list-tab>
          </a-tab-pane>
          <a-tab-pane key="3" tab="班组">
            <div>qqqqqq</div>
          </a-tab-pane>
        </a-tabs>
      </a-card>
    </a-col>
  </a-row>
</template>

<script>

  import '@/assets/less/TableExpand.less'
  import {getAction, httpAction} from "@api/manage";
  import MdmWorkCenterListTab from './MdmWorkCenterListTab'
  import MdmFactoryBaseInfo from '../factory/modules/MdmFactoryBaseInfo'

  export default {
    name: 'MdmWorkCenterAndTeam',
    components: {
      MdmWorkCenterListTab,
      MdmFactoryBaseInfo
    },
    data () {
      return {
        description: '工作中心及班组',
        factoryTreeLoading: false,
        factoryTreeData:[],
        selectedKeys: [],
        selectedData: {},
        autoExpandParent: true,
        treeExpandedKeys: [],
        treeReplaceFields:{children:'children', title:'name', key:'id'},
        myIcon:{slots: {icon: 'myIcon'}},
        treeSearchParam: {
          name: ''
        },
        url: {
          factoryTreeList: "/mdm/factory/treeList",
          list: "/mdm/workCenter/list",
          delete: "/mdm/workCenter/delete",
          deleteBatch: "/mdm/workCenter/deleteBatch",
          exportXlsUrl: "/mdm/workCenter/exportXls",
          importExcelUrl: "mdm/workCenter/importExcel",
          
        },
      }
    },
    created() {
      this.loadTree();
    },
    computed: {
      importExcelUrl: function(){
        return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
      },
    },
    methods: {
      loadTree(){
        var that = this;
        that.factoryTreeData = [];
        that.selectedKeys = [];
        that.factoryTreeLoading = true;
        getAction(this.url.factoryTreeList, this.treeSearchParam).then(res => {
          if (res.success && res.result ) {
            for (let i = 0; i < res.result.length; i++) {
              that.factoryTreeData.push(res.result[i])
            }
            this.setTreeIcon(that.factoryTreeData)
            this.selectedData = Object.assign({}, that.factoryTreeData[0]);
            this.selectedKeys = [that.factoryTreeData[0].id]
          }
        }).finally(() => {
          that.factoryTreeLoading = false
        })
      },
      // 树被展开触发的事件
      handleTreeExpand(expandedKeys) {
        this.treeExpandedKeys = expandedKeys
      },
      // 树被选择触发的事件
      handleTreeSelect(selectedKeys, e) {
        let record = e.node.dataRef;
        this.selectedData = Object.assign({}, record);
        this.selectedKeys = [record.id]
        this.$refs.mdmFactoryBaseInfo.open(record);
      },
      setTreeExpandedKeys(node) {
        //只展开一级目录
        if (node.children && node.children.length > 0) {
          this.treeExpandedKeys.push(node.id)
          //下方代码放开注释则默认展开所有节点
          /**
           for (let a = 0; a < node.children.length; a++) {
            this.setTreeExpandedKeys(node.children[a])
          }
           */
        }
      },
      setTreeIcon(tData){
        if(tData && tData.length > 0){
          for(let i=0; i<tData.length; i++){
            let data = tData[i];
            Object.assign(data, this.myIcon);
            if(data.children && data.children.length > 0){
              this.setTreeIcon(data.children);
            }
          }
        }
      },
      onSearch(value){
        this.treeSearchParam.name = value || '';
        this.loadTree();
      },
    }
  }
</script>
<style lang="less">
  /** 隐藏文件小图标 */
  .mdm-companydept-tree.ant-tree {
  li span.ant-tree-switcher.ant-tree-switcher-noop {
    display: none;
  }
  }
</style>